<template>
  <el-config-provider :locale="globalI18n">
    <router-view v-slot="{ Component }" v-if="!$route.meta.keepAlive">
      <transition name="router-fade" mode="out-in">
        <component :is="Component"></component>
      </transition>
    </router-view>
  </el-config-provider>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import enUs from 'element-plus/dist/locale/en.mjs'
import esEs from 'element-plus/dist/locale/es.mjs'

const locales = {
  '中文': zhCn,
  'English': enUs,
  'español': esEs
}

const globalI18n = ref(locales['中文'])

// 导出更新Element Plus语言的方法
const updateElementPlusLocale = (lang) => {
  globalI18n.value = locales[lang] || locales['中文']
}

// 将更新方法挂载到全局
window.$updateElementPlusLocale = updateElementPlusLocale

onMounted(() => {
  if(!localStorage.getItem('lang')){
    localStorage.setItem('lang',  '中文')
  }
  const langType = localStorage.getItem('lang')
  // console.log(langType)
  updateElementPlusLocale(langType || '中文')
})
</script>

<style lang="less">
:focus {
  outline: -webkit-focus-ring-color auto 0px;
}

.el-drawer__body {
  padding: 0 !important;
}

body {
  margin: 0;
  min-width: 300px;
  background-color: #f5f6f6;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

body,
html {
  margin: 0;
  height: 100%;
}

ul {
  padding: 0;
  margin: 0;

  li {
    list-style-type: none;
  }
}

.item-desc {
  font-size: small;
  color: #5e5e5e;
}

.max-fill {
  width: 100% !important;
}

::-webkit-scrollbar {
  width: 0;
  height: 10px;
  background-color: white;
}

::-webkit-scrollbar-thumb {
  width: 0;
  height: 10px;
  border-radius: 16px;
  background-color: #d9d9d9;
}

.el-main {
  margin: 5px !important;
  padding: 0 !important;
}
.el-select__wrapper.is-disabled .el-select__selected-item {
    color: #525355 !important;
}

.el-input.is-disabled .el-input__inner {
    color: #525355 !important;
    -webkit-text-fill-color: #525355 !important;
    cursor: not-allowed;
}
.el-textarea.is-disabled .el-textarea__inner {
    color: #525355 !important;
    -webkit-text-fill-color: #525355 !important;
    cursor: not-allowed;
}
</style>
